<template>
  <div class="config-container">
    <div class="config-content">
      <h3 style="padding-bottom: 15px;">系统配置</h3>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="数据库配置" name="database">
            <el-form-item label="数据库主机" prop="db_host">
              <el-input v-model.trim="form.db_host" placeholder="127.0.0.1" />
            </el-form-item>
            <el-form-item label="数据库端口" prop="db_port">
              <el-input v-model.trim="form.db_port" placeholder="3306" />
            </el-form-item>
            <el-form-item label="数据库名称" prop="db_database">
              <el-input v-model.trim="form.db_database" placeholder="saas" />
            </el-form-item>
            <el-form-item label="数据库用户名" prop="db_username">
              <el-input v-model.trim="form.db_username" placeholder="root" />
            </el-form-item>
            <el-form-item label="数据库密码" prop="db_password">
              <el-input v-model.trim="form.db_password" type="password" show-password placeholder="请输入密码" />
            </el-form-item>
          </el-collapse-item>
          <el-collapse-item title="后台配置" name="system">
            <el-form-item label="登录账号" prop="admin_username">
              <el-input v-model.trim="form.admin_username" placeholder="admin" />
            </el-form-item>
            <el-form-item label="登录密码" prop="admin_password">
              <el-input v-model.trim="form.admin_password" type="password" show-password placeholder="请输入密码" />
            </el-form-item>
            <el-form-item label="后台域名" prop="central_domain">
              <el-input v-model.trim="form.central_domain" placeholder="请输入后台域名" />
            </el-form-item>
            <el-form-item label="后台路径" prop="central_admin_path">
              <el-input v-model.trim="form.central_admin_path" placeholder="请输入后台路径" />
            </el-form-item>
          </el-collapse-item>
        </el-collapse>
      </el-form>
    </div>
    <div class="config-actions">
      <el-button @click="handleBack">上一步</el-button>
      <el-button type="primary" @click="handleNext">开始安装</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { startInstall } from '@/api/install.js'
import { useInstallStore } from '@/stores/install'

const router = useRouter()
const formRef = ref(null)
const activeNames = ref(['database', 'system'])
const installStore = useInstallStore()

const form = reactive({
  db_host: '127.0.0.1',
  db_port: '3306',
  db_database: 'saas',
  db_username: 'root',
  db_password: '',
  admin_username: 'admin',
  admin_password: '',
  central_domain: window.location.hostname,
  central_admin_path: 'admin'
})

const rules = {
  db_host: [{ required: true, message: '请输入数据库主机地址', trigger: 'blur' }],
  db_port: [{ required: true, message: '请输入数据库端口', trigger: 'blur' }],
  db_database: [{ required: true, message: '请输入数据库名称', trigger: 'blur' }],
  db_username: [{ required: true, message: '请输入数据库用户名', trigger: 'blur' }],
  db_password: [{ required: true, message: '请输入数据库密码', trigger: 'blur' }],
  admin_username: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
  admin_password: [{ required: true, message: '请输入登录密码', trigger: 'blur' }],
  central_domain: [{ required: true, message: '请输入后台域名', trigger: 'blur' }],
  central_admin_path: [{ required: true, message: '请输入后台路径', trigger: 'blur' }]
}

const handleBack = () => {
  router.back()
}

const handleNext = () => {
  if (!formRef.value) return

  formRef.value.validate(async (valid) => {
    if (!valid) return

    try {
      const { data, code } = await startInstall(form)
      if (data && code === 200) {
        installStore.setSteps(data.steps)
        installStore.setCurrentStep(0)
        installStore.setAdminUrl(getAdminUrl())
        ElMessage.success('配置保存成功')
        router.push('/install')
      }
    } catch (error) {
      ElMessage.error('配置保存失败：' + (error.message || '未知错误'))
    }
  })
}

const getAdminUrl = () => {
  const protocol = window.location.protocol
  const port = window.location.port
  const host = port ? `${form.central_domain}:${port}` : form.central_domain
  return `${protocol}//${host}/${form.central_admin_path}`
}
</script>

<style scoped>
.config-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.config-content {
  flex: 1;
  margin-bottom: 20px;
}

.config-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 0;
}
</style>